<template>
  <div>
    <top-card/>
    <el-divider/>
    <el-row justify="start">
      <el-col>
        <span>首页跑马灯切换</span>
        <br/>
        <br/>
        <Horse />
      </el-col>
    </el-row>
    <el-divider/>
    <el-row justify="space-between">
        <el-date-picker
            v-model="value1"
            :disabled-date="disabledDate"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            :shortcuts="shortcuts"
            @change="dateChange"
        >
        </el-date-picker>
        <el-date-picker
            v-model="value2"
            :disabled-date="disabledDate"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            :shortcuts="shortcuts"
            @change="date2Change"
        >
        </el-date-picker>
    </el-row>
    <br/>
    <el-row justify="space-between" v-if="count!==''">
      <el-col :span="11">
        <div>{{ value1[0] }} 到 {{value1[1]}} 销售图</div>
        <chart-form :category="category" :sale-count="count" :sales="sales"/>
      </el-col>
      <el-col :span="11">
        <div>
          {{ value2[0] }} 到 {{value2[1]}} {{name}}
          <el-tag class="tag" @click="quant" :type="this.name==='销售量'?'success':'info'">销售量</el-tag>
          <el-tag class="tag" @click="sale" :type="this.name!=='销售量'?'success':'info'">销售额</el-tag>
<!--          <el-button @click="quant" size="small" type="text">销售量</el-button>-->
<!--          <el-button @click="sale" size="small" type="text">销售额</el-button>-->
        </div>
        <chart-forms :name="name" :category="data1" :sale-count="data2" :sales="rate"/>
      </el-col>
    </el-row>
    <el-divider/>
    <el-row justify="start">
      <el-date-picker
          v-model="value3"
          :disabled-date="disabledDate"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          :shortcuts="shortcuts"
          @change="date3Change"
      >
      </el-date-picker>
    </el-row>
    <el-row justify="center">
        <div>{{ value3[0] }} 到 {{value3[1]}} 客流量</div>
        <rider-ship :category="category3" :rate="ridershipRate" :rider-ship="ridership"/>
    </el-row>
  </div>

</template>

<script>
import TopCard from "@/views/homepage/admin/topCard";
import ChartForm from "@/views/homepage/admin/chartsForm";
import {getRate, getRidershipRate, getSaleCounts} from "@/api/analysis";
import {dateFormat} from "@/utils/format";
import ChartForms from "@/views/homepage/admin/chartForms";
import RiderShip from "@/views/homepage/admin/riderShip";
import Horse from "@/views/circum/horse";
export default {
  name: "admin",
  components:{Horse, RiderShip, ChartForms, ChartForm, TopCard},
  data(){
    return{
      data1:'',
      data2:'',
      rate:'',
      name:'',
      value1:[],
      value2:[],
      value3:[],
      saleCount:[],
      category:'',
      category2:'',
      category3:'',
      sales:'',
      sales2:'',
      count: '',
      count2: '',
      ridership:'',
      salesRate:'',
      quantityRate:'',
      ridershipRate:'',
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
      shortcuts: [
        {
          text: '最近一周',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
            return [start, end]
          },
        },
        {
          text: '最近一个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
          },
        },
    ]
    }
  },
 created() {
   const start=dateFormat(new Date(new Date()-3600000*24*6).getTime(),false)
   const end=dateFormat(new Date().getTime(),false)
   this.value1=[start,end]
   this.value2=[start,end]
   this.value3=[start,end]
 },
  mounted() {
    this.getSaleAndCount()
    this.getSAndQRate()
    this.getRidership()
  },
  methods: {
    dateChange(){
      this.getSaleAndCount()
    },
    date2Change(){
      this.getSAndQRate()
    },
    date3Change(){
      this.getRidership()
    },
    getSaleAndCount() {
      getSaleCounts(this.value1[0],this.value1[1]).then(response => {
        const {saleCount} = response.data
        this.category = saleCount.map(value => value.buyDate)
        this.sales = saleCount.map(value => value.sales)
        this.count = saleCount.map(value => value.salesVolume)
      })
    },
    getSAndQRate(){
      getRate(this.value2[0],this.value2[1]).then(response => {
        const {salesQuantity} = response.data
        this.category2 = salesQuantity.map(value => value.buyDate)
        this.sales2 = salesQuantity.map(value => value.sales)
        this.count2 = salesQuantity.map(value => value.quantity)
        this.salesRate = salesQuantity.map(value => value.salesRate)
        this.quantityRate = salesQuantity.map(value => value.quantityRate)
        this.data1=this.category2
        this.data2=this.count2
        this.rate=this.quantityRate
        this.name='销售量'
      })
    },
    quant(){
      this.data1=this.category2
      this.data2=this.count2
      this.rate=this.quantityRate
      this.name='销售量'
    },
    sale(){
      this.data1=this.category2
      this.data2=this.sales2
      this.rate=this.salesRate
      this.name='销售额'
    },
    getRidership(){
      getRidershipRate(this.value3[0],this.value3[1]).then(response=>{
        const {ridership}=response.data
        this.category3 = ridership.map(value => value.enterDate)
        this.ridership = ridership.map(value => value.quality)
        this.ridershipRate = ridership.map(value => value.rate)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.tag{
  cursor: pointer;
}
</style>
